<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item1">
				<view class="text"> <text>*</text>客户名称: </view>
				<view class="input">
					<input v-model="user" type="text" placeholder="请输入客户名称" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text></text>联系电话: </view>
				<view class="input">
					<input v-model="phone" type="digit" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text></text>地址: </view>
				<view class="input">
					<input v-model="address" type="text" placeholder="请输入地址" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text></text>客户类型:</view>
				<view @tap="show1 = true" class="input first">
					<!-- <select v-model="usertype" name="" id="">
						<option value="0">普通</option>
						<option value="1">VIP</option>
					</select> -->
					<input v-model="usertype" placeholder="请选择客户类型" disabled type="text" />
					<u-picker @confirm="change" @cancel="show1 = false" :show="show1" :columns="columns" keyName="label"></u-picker>
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view @tap="reset" class=""> 重置 </view>
			<view @tap="submit" class=""> 提交 </view>
		</view>
		<CustomerScreening ref="child" @saveUser="saveUser" :show="show" />
	</view>
</template>

<script>
	import CustomerScreening from "../../components/CustomerScreening.vue";
	export default {
		data() {
			return {
				user: "",
				phone: "",
				address: "",
				usertype: "普通",
				usertype1: 0,
				show: false,
				show1: false,
				columns: [
					[{
							label: "普通",
							// 其他属性值
							id: 0,
							// ...
						},
						{
							label: "VIP",
							id: 1,
						},
					],
				],
			};
		},
		components: {
			CustomerScreening,
		},
		methods: {
			reset() {
				this.user = "";
				this.phone = "";
				this.address = "";
				this.usertype = "";
			},
			submit() {
				var userTelReg = /^1[3-9]\d{9}$/;
				if (
					this.user == ""
				) {
					uni.showToast({
						title: "输入客户名称",
						icon: "none",
					});
				}
				// else if (!userTelReg.test((this.phone))) {
				// 	uni.showToast({
				// 		title: "输入正确的电话号码",
				// 		icon: "none",
				// 	});
				// }
				else {
					this.$api
						.customerEditApi({
							cname: this.user,
							cusAddress: this.address,
							cusMobile: this.phone,
							cusTel: this.phone,
							cusTypeNo: this.usertype1,
						})
						.then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "提交成功",
									icon: "none",
								});
								uni.navigateBack({
									delta: 1
									// url: "/pages/customer/index",
								});
							} else {
								uni.showToast({
									title: res.message,
									icon: "none",
								});
							}
						});
				}
			},
			open() {
				this.$refs.child.open();
			},
			change(e) {
				// console.log(e.value[0].label);
				this.usertype = e.value[0].label;
				this.usertype1 = e.value[0].id;
				this.show1 = false;
			},
			saveUser(data) {
				this.user = data.cname;
				this.$refs.child.close();
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.newOrder {
		background: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;

			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					.note {
						width: 613rpx;
						height: 181rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}

					input {
						text-indent: 1em;
						height: 94rpx;
						width: 100%;
						color: #000;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					select {
						text-indent: 1em;
						height: 94rpx;
						width: 100%;
						color: #000;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
						border: none;
						padding-right: 20rpx;
					}

					.btn1 {
						width: 173rpx;
						line-height: 68rpx;
						height: 68rpx;
						text-align: center;
						background: #fe3430;
						border-radius: 49rpx;
						color: #fff;
						margin-left: 20rpx;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.first {
			height: 94rpx;
			width: 100%;
			color: #000;
			background: #f2f2f2;
			border-radius: 47rpx;
			border: none;
			padding-right: 20rpx;

			select {
				height: 94rpx;
				width: 100%;
				color: #000;
				background: #f22;
				border-radius: 47rpx;
				border: none;
				padding-right: 20rpx;
			}
		}

		.footer_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;

			view {
				background-image: url("/static/images/Registration/button.png");
				background-size: 280rpx 123rpx;
				color: #fff;
				width: 280rpx;
				height: 123rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 49rpx;
			}
		}
	}
</style>
